<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>个人简历</title>
  
</head>
<body>
    <div class="topbox" style="margin: 20px;" >
        <div class="topbox-item" style="width: 150 px;">
            <h3 class = "title" id="title">个人简历</h3>
        </div>
        <div class="circle"></div>
    
        <div class="button" id="button" >查看个人信息</div>
   
 
    <div class="container">
        
        <div class="leftSide">
           <div class="profile">
                <img id="avatar" src="/assets/default.webp" width="100px" alt="person_pic"/>
               <h2 id="name">- <br><span>Gruop_13</span></h2>
           </div>

           <div class="contactInfo">

                <h3 class = "title">年龄</h3>
                <ul>
                    <li>
                        <span class="text" id="age">-</span>
                    </li>
                    
                </ul>
                <h3 class = "title">性别</h3>
                <ul>
                    <li>
                        <span class="text" id="sex">-</span>
                    </li>
                    
                </ul>
               <h3 class="title">联系方式</h3>
               <ul>
                   <li>
                    <span class="material-icons">
                        call
                        </span>
                    <span class="text" id="tel">-</span>
                   </li>
                   <li>
                    <span class="material-icons">email</span>
                    <span class="text" id="email">-</span>
                   </li>
                   <li>
                    <span class="material-icons">language</span>
                    <a href="https://bilibili.com"_blank"><span class="text">B站个人主页</a>
                   </li>
                   <li>
                    <span class="material-icons">location_on</span>
                    <a id="locationlink" href="https://map.baidu.com/search/%E7%94%98%E5%AD%9C%E8%97%8F%E6%97%8F%E8%87%AA%E6%B2%BB%E5%B7%9E/@11351210,3489061.25,13.67z?querytype=s&wd=%E7%94%98%E5%AD%9C%E8%97%8F%E6%97%8F%E8%87%AA%E6%B2%BB%E5%B7%9E&c=73&provider=pc-aladin&pn=0&device_ratio=2&da_src=shareurl"_blank">
                        <span class="text" id="location">四川省甘孜藏族自治州</a>
                   </li>
               </ul>
           </div>

           <div class="contactInfo education">
               <h3 class="title">教育经历</h3>
                 <ul>
                     <li>
                         <h5>2014-2016</h5>
                         <h4>四川大学</h4>
                         <span class="text">计算机专业硕士</span>
                     </li>
                     <li>
                        <h5>2010-2014</h5>
                        <h4>四川大学</h4>
                        <span class="text">计算机专业本科</span>
                    </li>
                 </ul>
           </div>

           <div class="contactInfo education">
            <h3 class="title">所获荣誉</h3>
              <ul>
                  <li>
                      <h5>2010-2011</h5>
                      <h4>理塘实验小学</h4>
                      <span class="text">校三好学生</span>
                  </li>
                  <li>
                     <h5>2020-2022</h5>
                     <h4>relxtech公司</h4>
                     <span class="text">悦刻公司年度电子烟品牌大使</span>
                 </li>
              </ul>
            </div>

           <div class="contactInfo language">
                <h3 class="title">语言</h3>
                <ul>
                    <li> <span class="text">CET4:655/710</span> </li>
                    <li> <span class="percent">
                        <div style="width:calc(655/710*100%)"></div>

                    </span> </li>

                    <li> <span class="text">CET6:650/710</span> </li>
                    <li> <span class="percent">
                        <div style="width:calc(650/710*100%)"></div>

                    </span> </li>

                    <li> <span class="text">PTE: 85/90</span> </li>
                    <li> <span class="percent">
                        <div style="width:calc(85/90*100%)"></div>

                    </span> </li>
                </ul>

           </div>

        </div>

        <div class="rightSide">
            <div class="about">
                <h2 class="title2">个人介绍/自我评价</h2>
                <p>
                    本人热情随和，活波开朗，具有进取精神和团队精神，有较强的动手能力。良好协调沟通能力，适应力强，反应快、积极、细心、灵活， 具有一定的社会交往能力。所以我需要
                    找一份与自身知识结构相关的工作来展示自己的能力，在学习中，我注重理论与实践的结合，己具备了相当的实践操作能力。很强的事业心和责任感使我能够面对任何困难和挑战。

                </p>
            </div>

            <div class="about">
                <h2 class="title2">工作经验</h2>
                <div class="box">
                    <div class="year-company">
                        <h5>2020-至今</h5>
                        <h5>悦刻电子烟销售有限公司</h5>

                    </div>

                    <div class="text">
                        <h4>CEO    兼形象大使</h4>
                        <p>担任CEO和形象大使，为我们的电子烟产品在和传统香烟竞争中获取了大量优势，依靠纯真野性の美建立了可靠的用户依赖群体，成功开拓了电子烟产业的蓝海。</p>
                    </div>
                </div>

                <div class="box">
                    <div class="year-company">
                        <h5>2016-2020</h5>
                        <h5>华为终端有限公司</h5>

                    </div>

                    <div class="text">
                        <h4>应用前端开发工程师</h4>
                        <p>HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，
                            涵盖用户PC端、移动端网页，处理视觉和交互问题。 从广义上来讲，所有用户终端产品与视觉和交互有关的部分，
                            都是前端 工程师的专业领域。前端是一个相对比较新的行业，随着互联网的发展，
                             前端工程师的地位越来越重要，前端领域的技术发展也越来越快，各种新的思想、设计模式、工具和平台都快速发展，
                             对前端工程师的技能要求也越来越高。</p>
                    </div>
                </div>
            </div>


           <div class="about skills">
                <h2 class="title2">专业技能</h2>
                 <div class="box">
                    <h4>HTML</h4>
                    <div class="percent">
                        <div style="width:95%"></div>
                    </div>

                 </div>

                 <div class="box">
                    <h4>CSSL</h4>
                    <div class="percent">
                        <div style="width:78%"></div>
                    </div>

                 </div>

                 <div class="box">
                    <h4>JavaScriptL</h4>
                    <div class="percent">
                        <div style="width:95%"></div>
                    </div>

                 </div>

                 <div class="box">
                    <h4>React</h4>
                    <div class="percent">
                        <div style="width:90%"></div>
                    </div>

                 </div>

                 <div class="box">
                    <h4>Material_UI</h4>
                    <div class="percent">
                        <div style="width:80%"></div>
                    </div>

                 </div>

                 <div class="box">
                    <h4>Node</h4>
                    <div class="percent">
                        <div style="width:80%"></div>
                    </div>

                 </div>
           </div>

           <div class="about interest">
              <h2 class="title2">兴趣爱好</h2>
                <ul>
                    <li>
                        <span class="material-icons" style="vertical-align:-6px;">
                            functions
                            </span>
                        数学</li>
                    <li>
                        <span class="material-icons" style="vertical-align:-6px;">
                            code
                            </span>
                        编程</li>
                    <li>
                        <span class="material-icons" style="vertical-align:-6px;">
                            nightlife
                            </span>
                        爵士</li>
                    <li>
                        <span class="material-icons" style="vertical-align:-6px;">
                            linked_camera
                            </span>
                        摄影</li>
                </ul>

           </div>
           <div class="about social communication">
            <h2 class="title2">我的社交</h2>
            <div class="share">
                <a href="#" class="fab fa-weibo" style="margin: 12px;"></a>
                <a href="#" class="fab fa-qq" style="margin: 12px;"></a>
                <a href="#" class="fab fa-weixin" style="margin: 12px;"></a>
                <a href="#" class="fab fa-twitter" style="margin: 12px;"></a>
            </div>         
           
          </div>

          <div class="position">
            <h2 class="title2">目标岗位</h2>
                <body>前端开发岗</body>
          </div>

           <div class="pay">
            <h2 class="title2">期望年薪</h2>
                <body>20w+</body>
           </div> 

          
        </div>
    </div>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/index.js"></script>

</html> 